<div data-page="media" class="page">
    <!-- Top Navbar-->
    <div class="navbar">
        <div class="navbar-inner">
            <div class="left">
                <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
            </div>
            <!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
            <div class="center">Media</div>
        </div>
    </div>
    <!-- Scrollable page content -->
    <div class="page-content">
        <div class="content-block">
            <blockquote>This plugin provides the ability to record and play back audio files on a device.
            </blockquote>
        </div>
        <div class="content-block-title">Play Audio</div>
        <div class="content-block">
            <div class="content-block-inner">
                <p>
                    <span data-progress="0" class="progressbar"></span>
                    <span class="audioPosition">00:00</span>
                    <span class="mediaDuration" style="float: right;">00:00</span>
                </p>
                <p class="buttons-row">
                    <a href="#" class="button button-fill button-playpause">Play</a>
                    <a href="#" class="button button-fill button-stop">Stop</a>
                </p>
            </div>
        </div>
        <div class="content-block-title">Live Audio Recording</div>
        <div class="content-block">
            <div class="content-block-inner">
                <div class="wave-loader" style="visibility:hidden">
                    <svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 38.05">
                        <path class="Line_1" d="M0.91,15L0.78,15A1,1,0,0,0,0,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H0.91Z" />
                        <path class="Line_2" d="M6.91,9L6.78,9A1,1,0,0,0,6,10V28a1,1,0,1,0,2,0s0,0,0,0V10A1,1,0,0,0,7,9H6.91Z" />
                        <path class="Line_3" d="M12.91,0L12.78,0A1,1,0,0,0,12,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H12.91Z" />
                        <path class="Line_4" d="M18.91,10l-0.12,0A1,1,0,0,0,18,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H18.91Z" />
                        <path class="Line_5" d="M24.91,15l-0.12,0A1,1,0,0,0,24,16v6a1,1,0,0,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H24.91Z" />
                        <path class="Line_6" d="M30.91,10l-0.12,0A1,1,0,0,0,30,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H30.91Z" />
                        <path class="Line_7" d="M36.91,0L36.78,0A1,1,0,0,0,36,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H36.91Z" />
                        <path class="Line_8" d="M42.91,9L42.78,9A1,1,0,0,0,42,10V28a1,1,0,1,0,2,0s0,0,0,0V10a1,1,0,0,0-1-1H42.91Z" />
                        <path class="Line_9" d="M48.91,15l-0.12,0A1,1,0,0,0,48,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H48.91Z" />
                    </svg>
                </div>
                <p class="buttons-row">
                    <a href="#" class="button button-fill color-red button-record">Start Record</a>
                </p>
            </div>
        </div>
    </div>
</div>